<template name="skeleton">
  <scroll-view
    :refresher-enabled="true"
    :scroll-y="true"
    class="viewport viewport viewport-style"
    id="scroller"
    refresher-background="#00c09c"
    refresher-default-style="white"
    :enable-back-to-top="true"
  >
    <view class="overview sk-image sku-image">
      <view
        class="status icon-clock sk-transparent sk-text-0-0000-536 sk-text sk-pseudo sk-pseudo-circle"
        >等待付款</view
      >
      <view class="tips tips">
        <text class="money sk-transparent sk-text-0-0000-375 sk-text"
          >应付金额: ¥ 300.00</text
        >
        <text class="time sk-transparent sk-text-0-0000-148 sk-text">支付剩余</text>
        <view is="node-modules/@dcloudio/uni-ui/lib/uni-countdown/uni-countdown">
          <view
            class="uni-countdown countdown--uni-countdown data-v-342c352a countdown--data-v-342c352a"
          >
            <text
              class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-761 sk-text sk-text-style"
              >00</text
            >
            <text
              class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity sk-opacity-style"
              >时</text
            >
            <text
              class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-375 sk-text-style"
              >29</text
            >
            <text
              class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity sk-opacity-style"
              >分</text
            >
            <text
              class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-948 sk-text sk-text-style"
              >49</text
            >
            <text
              class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity sk-opacity-style"
              >秒</text
            >
          </view>
        </view>
      </view>
      <view class="button sk-transparent sk-text-29-6296-284 sk-text sk-text-style"
        >去支付</view
      >
    </view>
    <view class="goods goods">
      <view class="item item">
        <navigator class="navigator navigator" hover-class="none">
          <image class="cover sk-image"></image>
          <view class="meta meta">
            <view class="name ellipsis sk-transparent sk-text-14-2857-345 sk-text"
              >支撑颈椎无负担，颈椎固定器</view
            >
            <view class="type sk-transparent sk-text-22-2222-886 sk-text"
              >充气发热款</view
            >
            <view class="price price">
              <view class="actual actual">
                <text class="symbol sk-transparent sk-opacity">¥</text>
                <text class="sk-transparent sk-text-14-2857-807 sk-text">299</text>
              </view>
            </view>
            <view class="quantity sk-transparent sk-opacity">x1</view>
          </view>
        </navigator>
      </view>
      <view class="total total">
        <view class="row row">
          <view class="text sk-transparent sk-text-0-0000-868 sk-text"
            >商品总价:
          </view>
          <view
            class="symbol sk-transparent sk-text-0-0000-505 sk-text sk-pseudo sk-pseudo-circle"
            >99.00</view
          >
        </view>
        <view class="row row">
          <view class="text sk-transparent sk-text-0-0000-682 sk-text">运费: </view>
          <view
            class="symbol sk-transparent sk-text-0-0000-936 sk-text sk-pseudo sk-pseudo-circle"
            >10.00</view
          >
        </view>
        <view class="row row">
          <view class="text sk-transparent sk-text-0-0000-162 sk-text"
            >应付金额:
          </view>
          <view
            class="symbol primary sk-transparent sk-text-0-0000-519 sk-text sk-pseudo sk-pseudo-circle"
            >109.00</view
          >
        </view>
      </view>
    </view>
    <view class="detail detail">
      <view class="title sk-transparent sk-text-0-0000-672 sk-text">订单信息</view>
      <view class="row row">
        <view class="item sk-transparent">
          订单编号: 1820732881895428097
          <text class="copy sk-transparent sk-text-0-0000-979 sk-text">复制</text>
        </view>
        <view class="item sk-transparent sk-text-0-0000-95 sk-text"
          >下单时间: 2024-08-06 16:05:21</view
        >
      </view>
    </view>
    <view is="components/CustomGuess" class="r r">
      <view class="caption CustomGuess--caption">
        <text
          class="text CustomGuess--text sk-transparent sk-text-0-0000-759 sk-text sk-pseudo sk-pseudo-circle"
          >猜你喜欢</text
        >
      </view>
      <view class="guess CustomGuess--guess">
        <navigator class="guess-item CustomGuess--guess-item">
          <image class="image CustomGuess--image sk-image" mode="aspectFill"></image>
        </navigator>
        <navigator class="guess-item CustomGuess--guess-item">
          <image class="image CustomGuess--image sk-image" mode="aspectFill"></image>
        </navigator>
      </view>
    </view>
  </scroll-view>
</template>
<style lang="scss">
@import '@/components/styles/CustomGuess.scss';
.navbar-style {
  padding-top: 20px;
}
.viewport-style {
  padding-bottom: 0px;
}
.sk-text-style {
  color: rgb(255, 255, 255);
  font-size: 14px;
  width: 22px;
  line-height: 20px;
  border-radius: 3px;
  background-position-x: 50%;
}
.sk-opacity-style {
  color: #fff;
  font-size: 12px;
}
.sk-text-style {
  background-position-x: 50%;
}
.toolbar-style {
  padding-bottom: 0px;
}
.sku-image {
  padding-top: 40px;
}
.sk-transparent {
  color: transparent !important;
}
.sk-text-14-2857-281 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 42.6563rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-0-0000-536 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 35.1563rpx;
  position: relative !important;
}
.sk-text-0-0000-375 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 32.8125rpx;
  position: relative !important;
}
.sk-text-0-0000-148 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 32.8125rpx;
  position: relative !important;
}
.sk-text-15-0000-761 {
  background-image: linear-gradient(
    transparent 15%,
    #eeeeee 0%,
    #eeeeee 85%,
    transparent 0%
  ) !important;
  background-size: 100% 46.875rpx;
  position: relative !important;
}
.sk-opacity {
  opacity: 0 !important;
}
.sk-text-15-0000-375 {
  background-image: linear-gradient(
    transparent 15%,
    #eeeeee 0%,
    #eeeeee 85%,
    transparent 0%
  ) !important;
  background-size: 100% 46.875rpx;
  position: relative !important;
}
.sk-text-15-0000-948 {
  background-image: linear-gradient(
    transparent 15%,
    #eeeeee 0%,
    #eeeeee 85%,
    transparent 0%
  ) !important;
  background-size: 100% 46.875rpx;
  position: relative !important;
}
.sk-text-29-6296-284 {
  background-image: linear-gradient(
    transparent 29.6296%,
    #eeeeee 0%,
    #eeeeee 70.3704%,
    transparent 0%
  ) !important;
  background-size: 100% 63.2813rpx;
  position: relative !important;
}
.sk-text-14-2857-345 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.0938rpx;
  position: relative !important;
}
.sk-text-22-2222-886 {
  background-image: linear-gradient(
    transparent 22.2222%,
    #eeeeee 0%,
    #eeeeee 77.7778%,
    transparent 0%
  ) !important;
  background-size: 100% 42.1875rpx;
  position: relative !important;
}
.sk-text-14-2857-807 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 32.8125rpx;
  position: relative !important;
}
.sk-text-0-0000-868 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 25.7813rpx;
  position: relative !important;
}
.sk-text-0-0000-505 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 25.7813rpx;
  position: relative !important;
}
.sk-text-0-0000-682 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 25.7813rpx;
  position: relative !important;
}
.sk-text-0-0000-936 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 25.7813rpx;
  position: relative !important;
}
.sk-text-0-0000-162 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 25.7813rpx;
  position: relative !important;
}
.sk-text-0-0000-519 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 35.1563rpx;
  position: relative !important;
}
.sk-text-0-0000-672 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 28.125rpx;
  position: relative !important;
}
.sk-text-0-0000-979 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 18.75rpx;
  position: relative !important;
}
.sk-text-0-0000-95 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 25.7813rpx;
  position: relative !important;
}
.sk-text-0-0000-759 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 30.4688rpx;
  position: relative !important;
}
.sk-text-14-2857-810 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.0938rpx;
  position: relative !important;
}
.sk-text-14-2857-418 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.0938rpx;
  position: relative !important;
}
.sk-image {
  background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
  background: #efefef !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
</style>
